import React, { PureComponent } from 'react'
import Header from './components/Header'

// const MyContext = React.createContext()
import MyContext from './Context/App'
// console.log(MyContext)

export default class App extends PureComponent {



    state = {
        m: 0,
        n: 0,
        username: 'Tom',
        hasError: ''
    }

    add = () => {
        // 对象式setState
        // 适用于：新状态不依赖原状态
        const { m } = this.state
        this.setState(
            { m: m + 1 },
            () => {
                console.log('state改变后的回调函数')
            }
        )

        // 函数式setState
        // 适用于：新状态依赖原状态
        this.setState((state, props) => ({ n: state.m + 1 }))
        // =>
        // this.setState( state => ({ n: state.m + 1 }))
    }

    /* shouldComponentUpdate(nextProps, nextState) {
        return JSON.stringify(nextState) !== JSON.stringify(this.state)
        // console.log(nextProps, nextState)
    } */

    static getDerivedStateFromError(error) {
        console.log(error)
        return { hasError: error }
    }

    componentDidCatch() {
        console.log('APP子组件出错')
    }

    render() {
        return (
            <div className="app">
                <MyContext.Provider value={this.state}>
                    <Header />
                </MyContext.Provider>
                <h2>M: {this.state.m}</h2>
                <h2>N: {this.state.n}</h2>
                <button onClick={this.add}>+1</button>
                {/* <MyContext.Provider value={this.state}>
                    <A render={(name) => <B name={name} />} />
                </MyContext.Provider> */}

                {this.state.hasError ? <p>当前网络错误，请稍后再试</p> : <A />}
            </div>
        )
    }
}

class A extends PureComponent {
    // shouldComponentUpdate(nextProps, nextState) {
    //     return JSON.stringify(nextProps) !== JSON.stringify(this.props)
    // }
    state = {
        name: 'ZhangSan'
    }
    render() {
        console.log('A render')
        return (
            <div style={{ background: 'red', padding: '10px' }}>
                <h2>this is A</h2>
                {/* <B /> */}
                {/* {this.props.render(this.state.name)} */}
                {this.state.map(v => {
                    return <p>{v}</p>
                })}
            </div>
        )
    }
}

class B extends PureComponent {
    // 声明接收context
    static contextType = MyContext
    /* shouldComponentUpdate(nextProps) {
        // console.log(this.props, nextProps)
        return JSON.stringify(nextProps) !== JSON.stringify(this.props)
    } */

    render() {
        console.log(this.props)
        console.log('B render')
        return (
            <div style={{ background: 'blue', padding: '10px' }}>
                {/* <h3>this is B, username : {this.context.username}</h3> */}
                <h3>this is B, username : </h3>
                {/* <MyContext.Consumer>
                    {
                        value => {
                            // console.log(value)
                        }
                    }
                </MyContext.Consumer> */}
            </div>
        )
    }
}
